<template>
  <div>
    <!-- TODO: 可视化面板，博客浏览、点击、评论量、网站访问量 -->
    <v-card class="mx-auto text-center" color="green" max-width="600" dark>
      <v-card-text>
        <v-sheet color="rgba(0, 0, 0, .12)">
          <v-sparkline :gradient="['#00c6ff', '#F0F', '#FF0']" gradient-direction="left" :model-value="value"
            color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round" smooth auto-draw>
            <template v-slot:label="item">
              ${{ item.value }}
            </template>
          </v-sparkline>
        </v-sheet>
      </v-card-text>

      <v-card-text>
        <div class="text-h4 font-weight-thin">
          Sales Last 24h
        </div>
      </v-card-text>

      <v-divider></v-divider>

      <v-card-actions class="justify-center">
        <v-btn variant="text" block>
          Go to Report
        </v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter()
console.log(router.options.routes);
const value = ref([
  423,
  446,
  675,
  510,
  590,
  610,
  760,
])
</script>
